<template>
	<view class="top u-p-l-28 u-p-r-28 u-rela">
		<image src="/static/images/my-bg.png" mode="widthFix" class="bg"></image>
		<view class="u-rela">
			<u-gap height="80"></u-gap>
			<view class="u-flex" style="align-items: flex-start;" v-if="!isLogin">
				<view class="u-flex-1 u-m-l-20">
					<view @click="nav('/pages/login/login')">
						<view class="u-flex">
							<view class="u-font-32 u-p-r-15">
								未登录
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<u-icon label-pos="left" name="arrow-right" label-color="#FFFFFF" color="#FFFFFF" label-size="24" size="24" label="历史账号" @click="nav('/pagesSub/switchAccount/switchAccount')"></u-icon>
				</view>
			</view>
			<view class="u-flex" style="align-items: flex-start;" v-if="isLogin">
				<view class="avatar-wrap" @click="navLogin('/pagesSub/userInfo/userInfo')">
					<u-avatar :src="baseImgUrl+userInfo.avatar" size="120" v-if="userInfo.avatar"></u-avatar>
					<u-avatar :src="defaultAvatar" size="120" v-else></u-avatar>
					<image src="/static/images/icon-camera.png" mode="aspectFit"></image>
				</view>
				<view class="u-flex-1 u-m-l-20">
					<view @click="navLogin('/pagesSub/userInfo/userInfo')">
						<view class="u-flex">
							<view class="u-font-32 u-p-r-15">
								{{userInfo.nickName}}
							</view>
							<u-icon name="edit-pen" color="#FFFFFF" size="32"></u-icon>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-flex">
							<!-- <view class="u-m-r-12" v-if="userInfo.balance && userInfo.balance.freeze == 0">
								<u-tag text="冻结中" mode="dark" type="error" size="mini" @click="tips"/>
							</view> -->
							<view class="u-font-24">
								{{hidePhone(userInfo.phone)}}
							</view>
						</view>
					</view>
					<u-gap height="10"></u-gap>
					<view class="u-flex" @click="copy(userInfo.referralCode)">
						<!-- 没下单报单区的商品 没有邀请码 -->
						<view class="u-font-24 u-p-r-15">
							邀请码：{{userInfo.referralCode || '暂未生成'}}
						</view>
						<image src="/static/images/icon-copy-white.png" mode="aspectFit"
							style="width: 24upx;height: 24upx;" v-if="userInfo.referralCode"></image>
					</view>
				</view>
				<view class="">
					<u-icon label-pos="left" name="arrow-right" label-color="#FFFFFF" color="#FFFFFF" label-size="24"
						size="24" label="切换账号" @click="navLogin('/pagesSub/switchAccount/switchAccount')"></u-icon>
				</view>
			</view>
			<u-gap height="40"></u-gap>
		</view>
	</view>
	<view class="u-p-l-28 u-p-r-28 u-rela" v-if="isLogin && userInfo.balance">
		<view class="bgw box-radius u-p-24">
			<view class="u-tips-color">
				可提现(元)
			</view>
			<u-gap height="20"></u-gap>
			<view class="u-flex">
				<view class="u-flex-1" style="font-size: 48upx;">
					{{userInfo.balance.dominate}}
				</view>
				<u-button size="mini" type="warning" shape="circle"
					@click="navLogin('/pagesSub/editPoint/editPoint')">转积分</u-button>
				<view class="u-p-l-20"></view>
				<u-button size="mini" type="primary" shape="circle"
					@click="navLogin('/pagesSub/editWithdraw/editWithdraw')">提现</u-button>
			</view>
			<u-gap height="20"></u-gap>
			<u-line color="#F6F6F6" />
			<u-gap height="20"></u-gap>
			<u-row gutter="20">
				<u-col span="4">
					<view class="bg-gray u-p-20 box-radius" @click="navLogin('/pagesSub/pointList/pointList')">
						<view class="u-font-32">
							{{userInfo.balance.points}}
						</view>
						<view class="u-tips-color u-font-24 u-p-t-6">
							积分(元)
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="bg-gray u-p-20 box-radius" @click="navLogin('/pagesSub/shareFinance/shareFinance?type=0')">
						<view class="u-font-32">
							{{userInfo.balance.share}}
						</view>
						<view class="u-tips-color u-font-24 u-p-t-6">
							分享佣金(元)
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="bg-gray u-p-20 box-radius u-rela" @click="navLogin('/pagesSub/shareFinance/shareFinance?type=1')">
						<view class="" v-if="userInfo.balance && userInfo.balance.freeze > 0"
							style="transform: scale(0.8);position: absolute;right: 0;top: 0;">
							<u-tag text="冻结中" mode="dark" type="error" size="mini" @click="tips" />
						</view>
						<view class="u-font-32">
							{{userInfo.balance.dividend}}
						</view>
						<view class="u-tips-color u-font-24 u-p-t-6">
							分红佣金(元)
						</view>
					</view>
				</u-col>
			</u-row>
			<!-- 	<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="2000" :duration="500"
				style="height: 180upx;" indicator-active-color="#117B12" indicator-color="#F1F1F1">
				<swiper-item>
					
				</swiper-item>
				<swiper-item>
					<u-row gutter="20">
						<u-col span="4">
							<view class="bg-gray u-p-20 box-radius" @click="navLogin('/pagesSub/pointList/pointList')">
								<view class="u-font-32">
									{{userInfo.balance.freeze}}
								</view>
								<view class="u-tips-color u-font-24 u-p-t-6">
									冻结佣金
								</view>
							</view>
						</u-col>
					</u-row>
				</swiper-item>
			</swiper> -->
		</view>
	</view>
	<u-gap height="20"></u-gap>
	<view class="u-p-l-28 u-p-r-28 u-rela">
		<view class="bgw box-radius u-p-24">
			<view class="u-flex">
				<view class="u-flex-1">
					我的订单
				</view>
				<u-icon label-pos="left" name="arrow-right" label-color="#999999" color="#999999" label-size="24"
					size="24" label="全部" @click="navLogin('/pagesSub/orderList/orderList')"></u-icon>
			</view>
			<view class="u-flex">
				<template v-for="(item,index) in orderMenus" :key="index">
					<view class="u-flex-1 u-rela"
						@click="navLogin('/pagesSub/orderList/orderList?status='+item.orderStatus)">
						<u-badge type="warning" :count="orderCount[item.orderStatus]" size="mini"></u-badge>
						<view class="order-menu-icon u-p-t-20">
							<image :src="item.icon" mode="aspectFit"></image>
						</view>
						<view class="u-text-center u-font-24 u-p-t-10">
							{{item.title}}
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
	<u-gap height="20"></u-gap>
	<view class="menu-wrapper u-p-l-28 u-p-r-28">
		<template v-for="(item,index) in menus" :key="index">
			<view class="box-radius menu-box">
				<u-cell-group :border="false">
					<template v-for="(v,i) in item" :key="v.title">
						<template v-if="v.path == 'contact'">
							<button open-type="contact" class="u-reset-button">
								<u-cell-item :title="v.title" :border-bottom="i+1 != item.length">
									<template v-slot:icon>
										<view class="menu-icon">
											<image :src="v.icon" mode="aspectFit"></image>
										</view>
									</template>
								</u-cell-item>
							</button>
						</template>
						<template v-else>
							<u-cell-item :title="v.title" :border-bottom="i+1 != item.length" @click="menuClick(v)">
								<template v-slot:icon>
									<view class="menu-icon">
										<image :src="v.icon" mode="aspectFit"></image>
									</view>
								</template>
							</u-cell-item>
						</template>
					</template>
				</u-cell-group>
			</view>
			<u-gap height="24"></u-gap>
		</template>
	</view>
	<template v-if="!isLogin">
		<view class="fixed-bottom u-p-80" style="bottom:50px">
			<u-button @click="nav('/pages/login/login')" type="primary" shape="circle">登录</u-button>
		</view>
	</template>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import mixins from '@/common/js/mixins.js';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl,
		defaultAvatar
	} = proxy
	const {
		nav,
		navLogin,
		modal,
		hidePhone
	} = proxy.$util;
	const userInfo = computed(() => store.state.$userInfo)
	const isLogin = computed(() => {
		return store.getters.get_isLogin
	})
	// console.log(userInfo.value);
	// store.dispatch('logout')
	const orderMenus = [{
			title: '待付款',
			icon: '/static/images/icon-dfk.png',
			path: '/pagesSub/serviceTel/serviceTel',
			orderStatus: 0
		},
		{
			title: '待发货',
			icon: '/static/images/icon-dfh.png',
			path: '/pagesSub/serviceTel/serviceTel',
			orderStatus: 1
		},
		{
			title: '待收货',
			icon: '/static/images/icon-dsh.png',
			path: '/pagesSub/serviceTel/serviceTel',
			orderStatus: 2
		},
		{
			title: '待评价',
			icon: '/static/images/icon-dpj.png',
			path: '/pagesSub/serviceTel/serviceTel',
			orderStatus: 3
		},
		{
			title: '已完成',
			icon: '/static/images/icon-ywc.png',
			path: '/pagesSub/serviceTel/serviceTel',
			orderStatus: 4
		},
	];
	const orderCount = computed(() => {
		let obj = {
			'0': 0,
			'1': 0,
			'2': 0,
			'3': 0,
			'4': 0,
			'5': 0,
			'10': 0,
		};
		try {
			userInfo.value.orderStatusCountList.forEach(v => {
				obj[v.orderStatus] = v.orderCount
			})
		} catch (err) {}
		return obj;
	})
	const menus = computed(() => {
		if (!store.getters.get_isLogin) {
			return [
				[{
					title: '联系客服',
					icon: '/static/images/icon-lxkf.png',
					path: 'contact'
				}]
			]
		}
		return [
			[{
					title: '我的队伍',
					icon: '/static/images/icon-wddw.png',
					path: '/pagesSub/myTeam/myTeam'
				},
				{
					title: '我的团队',
					icon: '/static/images/icon-wdtd.png',
					path: '/pagesSub/myTeamInfo/myTeamInfo'
				},
				{
					title: '分享订单',
					icon: '/static/images/icon-fxdd.png',
					path: '/pagesSub/shareOrderList/shareOrderList'
				},
				{
					title: '佣金明细',
					icon: '/static/images/icon-yjmx.png',
					path: '/pagesSub/finance/finance'
				},
				{
					title: '邀请海报',
					icon: '/static/images/icon-yqhb.png',
					path: '/pages/share/share'
				},
			],
			[{
					title: '复购区',
					icon: '/static/images/icon-gdq.png',
					path: '/pagesSub/waitOrder/waitOrder'
				},
				{
					title: '收货地址',
					icon: '/static/images/icon-shdz.png',
					path: '/pagesSub/addressList/addressList'
				},
				{
					title: '联系客服',
					icon: '/static/images/icon-lxkf.png',
					path: 'contact'
				},
			]
		]

	})
	const menuClick = (v) => {
		nav(v.path)
	}
	const copy = (d) => {
		if (!d) {
			modal({
				content: '下单报单区的商品即可生成邀请码。',
				showCancel: false,
				confirmText:'知道了'
			}).then(res=>{
				// uni.navigateBack();
			})
			return;
		}
		uni.setClipboardData({
			data: d,
			success() {
				uni.$u.toast(`已复制"${d}"至剪贴板`);
			}
		});
	}
	const tips = () => {
		modal({
			content: '直推1人，可解除已冻结分红佣金及复购商品。',
			showCancel: false,
			confirmText:'知道了'
		}).then(res=>{
			// uni.navigateBack();
		})
	}
	onReady(() => {

	})
	onLoad((d) => {

	})
	onShow(() => {
		// store.commit('set_token', 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2tleSI6ImIwNDM3NjY1MzJlZDQxZDdhYWFjMDE3NjgwMmJiMzkwIiwidXNlcl91aWQiOiJiNGViMDkxZjZiN2E0MGQ4ODFlNDc1YjdiYTMyNWUyZiJ9.pPbe19TpVf0jAQlZYSqgz-AH2MR8wJV93axPqhyeV-hf3xZGI147Sme7kKfhWVPSr7s0aMiYxU9069jveHqbtA')
		// store.commit('set_userInfo', {
		// 	nickname: '邬萌萌',
		// 	id: 1212
		// })
		if (store.getters.get_isLogin) {
			store.dispatch('getUserInfo')
		}
	})
</script>
<style lang="scss" scoped>
	::v-deep.uni-swiper-dot {
		width: 22px;
		height: 5px;
		border-radius: 0;
		margin-right: 0;
	}

	.top {
		color: #ffffff;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			display: block;
			width: 100%;
		}
	}

	.bg-gray {
		background: #F6F6F6;
	}

	.avatar-wrap {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		// overflow: hidden;

		image {
			position: absolute;
			width: 36upx;
			height: 36upx;
			bottom: 0;
			right: 0;
		}
	}

	.menu-wrapper {}

	.menu-box {
		// box-shadow: 0rpx -16rpx 28rpx -2rpx rgba(11,79,134,0.24);
	}

	.order-menu-icon {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.menu-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20upx;

		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
</style>